<template>
	<van-empty description="暂无匹配" v-if="list.length == 0" />
	<scroll-view scroll-y="true" style=" height: 100vh" @scrolltolower="lowerBottom" v-else refresher-enabled="true"
		:refresher-triggered="triggered" @refresherrefresh="onRestore">
		<view class="meslist" v-for="(item, index) in list" :key="item.userid">
			<view class="mes">
				<img :src="item.img" alt="" class="headimg" />
				<view>
					<view class="Con">
						<view class="TitleAndContent">
							<h2 class="title"> {{ item.title.substring(0, 20) }} </h2>
							<view class="content">
								{{ item.content.substring(0, 10) }}
							</view>
						</view>
						<view class="btn">
							<view @click="showdetail(item.mesid)"><van-icon name="todo-list-o" /></view>
							<view @click="showFreind(item.mesid)"><van-icon name="friends" /></view>
						</view>
					</view>
					<view class="timeAndType">
						<view class="time">
							{{ item.time.substring(0, 10) }}
						</view>
						<view class="type">
							<view class="action">
								<view class="cu-tag round bg-orange light">{{ item.types }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import mes from '@/modul/Aboutme/match_history_mes.vue'
import { getMymatch } from '@/store/api.js'
import {
	truncateString
} from '@/store/constants.js'
export default {
	mounted() {
		let data = {
			pageNum: 1,
			pageSize: 20
		}
		getMymatch(data).then((res) => {
			console.log(res)
			this.num++
			this.total = res.data.data.total
			res.data.data.rows.forEach(item => {
				let types = ''
				item.tags.forEach(it => {
					types = types + '#' + it.name
				})
				this.list.push({
					img: item.posterAvatar,
					title: item.title,
					content: truncateString(item.content),
					userid: item.posterId,
					mesid: item.id,
					time: item.beginTime,
					types: types
				})
			})
		}).catch(err => {
			console.log(err)
		})
	},
	components: {
		mes
	},
	data() {
		return {
			triggered:false,
			num: 1,
			total: 0,
			list: []
		}
	},
	methods: {onRestore(){
				this.triggered=true
				this.num=1
				this.total=0
				this.list=[]
				let data = {
					pageNum: 1,
					pageSize: 20
				}
				getMymatch(data).then((res) => {
					console.log(res)
					this.num++
					this.total=res.data.data.total
					res.data.data.rows.forEach(item => {
						let types = ''
						item.tags.forEach(it => {
							types = types + '#' + it.name
						})
						this.list.push({
							img: item.posterAvatar,
							title: item.title,
							content: truncateString(item.content),
							userid: item.posterId,
							mesid: item.id,
							time: item.beginTime,
							types:types
						})
					})
				}).catch(err => {
					console.log(err)
				})
				setTimeout(()=>{
					this.triggered=false
				},1000)
			},
		lowerBottom() {
			if (this.total > this.list.length) {
				let data = {
					pageNum: this.num,
					pageSize: 20
				}
				getMymatch(data).then((res) => {
					console.log(res)
					this.num++
					res.data.data.rows.forEach(item => {
						this.list.push({
							img: item.posterAvatar,
							title: item.title,
							content: truncateString(item.content),
							userid: item.posterId,
							mesid: item.id,
							time: item.beginTime
						})
					})
				}).catch(err => {
					console.log(err)
				})
			}
		},
		showFreind(mesid) {
			uni.navigateTo({
				url: `/subpkg/Match_friend/Match_friend?id=${mesid}`
			})
		},
		showdetail(mesid) {
			uni.navigateTo({
				url: `/subpkg/mes_detail/mes_detail?id=${mesid}`
			})
		}

	}
}
</script>

<style scoped lang="less">
.Con {
	width: 70vw;
	display: flex;
}

.btn {
	width: 20;
	height: 20;
}

.timeAndType {
	display: flex;
	font-size: 10px;
	justify-content: flex-end;
	margin-right: 2vw;
	align-items: center;

	.time {
		margin-right: 4vw;
	}
}

.meslist {
	position: relative;
	z-index: 1;
	margin-block-start: 20rpx;
}

/* 单个卡片 */
.mes {
	z-index: 5;
	display: flex;
	margin-top: 10rpx;
	border: 1px solid #fefefe;
	height: 170rpx;
	border-radius: 15rpx;
	align-items: center;
	background-color: #fefefe;
	box-shadow: 7px 7px 14px #d0d0d0,
		-7px -7px 14px #f0f0f0;
	margin: 16rpx;
}

.headimg {
	width: 100rpx;
	height: 100rpx;
	margin-right: 50rpx;
	border-radius: 75%;
}

.content {
	width: 70vw;
	font-size: 25rpx;
	-webkit-line-clamp: 2;
}

.title {
	font-weight: 700;
	font-size: 30rpx;
}
</style>